<template>
    <div id="Powdered">
        <div class="header">
            <div class="ret" @click="goBack()"></div>
            <img class="header-left" src="../../assets/zfc-img/左箭头.png" alt="左箭头">
            <span>奶粉</span>
            <img class="header-right" src="../../assets/zfc-img/断货王/分享图标.png" alt="分享图标">
        </div>
        <div class="banner">
            <img src="../../assets/img/妈咪宝贝.png" alt="">
        </div>
        <div class="banner-con">
            <span>
      该模块主要内容是奶粉品牌的介绍，成立于1924年，
是日本零食十强之一。制作的曲奇和糕点系列，品质
远胜于欧洲传统西点，做工研究、精致、高贵、时尚、
健康是Bourbon一贯的严谨作风，其北日本系列礼盒
更是夺得了销售冠军，相当受欢迎。
            </span>
        </div>
        <div class="sequence">
            <div v-for="(item,index) in arr" v-bind:key="index" class="commodity">
                <img class="commImg" :src="item.urlimage" alt="">
                <p class="commSp1">{{item.name}}</p>
                <p class="commSp2">￥{{item.price}}</p>
                <p class="commSp3">{{item.go}}</p>
            </div>
        </div>
        <div class="fot"></div>
    </div>
</template>
<script>
export default {
    name:'Powdered',
    data() {
        return {
            arr:[
                {
                    urlimage:require('../../assets/img/奶粉.png'),
                    name:'BOURBON布尔本hello kitty黄油曲奇礼盒54枚',
                    price:12.90,
                    go:'立即购买'
                },
                {
                    urlimage:require('../../assets/img/奶粉.png'),
                    name:'BOURBON布尔本hello kitty黄油曲奇礼盒54枚',
                    price:12.90,
                    go:'立即购买'
                },
                {
                    urlimage:require('../../assets/img/奶粉.png'),
                    name:'BOURBON布尔本hello kitty黄油曲奇礼盒54枚',
                    price:12.90,
                    go:'立即购买'
                },
                {
                    urlimage:require('../../assets/img/奶粉.png'),
                    name:'BOURBON布尔本hello kitty黄油曲奇礼盒54枚',
                    price:12.90,
                    go:'立即购买'
                },{
                    urlimage:require('../../assets/img/奶粉.png'),
                    name:'BOURBON布尔本hello kitty黄油曲奇礼盒54枚',
                    price:12.90,
                    go:'立即购买'
                },{
                    urlimage:require('../../assets/img/奶粉.png'),
                    name:'BOURBON布尔本hello kitty黄油曲奇礼盒54枚',
                    price:12.90,
                    go:'立即购买'
                },

            ]
        }
    },
    methods: {
         goBack() {
            window.history.back()
        },
    },
}
</script>
<style scoped>
#Newweek{
    width: 100%;
    background-color: #e2f6fe;
    position: absolute;
    z-index: 111;
}
 .header{
      width: 100%;
      height: 0.96rem;
      line-height: 0.96rem;
      background-color: #e53e42;
      font-size: 0.36rem;
      color: #fff;
      position: relative;
  }
  .ret{
    width: 0.25rem;
    height: 0.4rem;
    position: absolute;
    left: 0.2rem;
    top: 0.35rem;
    z-index: 100;
}
  .header-left{
      width: 0.25rem;
      height: 0.4rem;
      position: absolute;
      left: 0.2rem;
      top: 0.3rem;
  }
  .header>span{
      margin-left: 3rem;
  }
  .header-right{
      width: 0.4rem;
      height: 0.4rem;
      position: absolute;
      left: 6.3rem;
      top: 0.25rem;
  }
  .banner{
      width: 100%;
      height: 4rem;
      
  }
  .banner img{
      width: 100%;
      height: 4rem;
  }
  .banner-con{
      width: 100%;
      height: 2.6rem;
      font-size: 0.28rem;
      background-color: #f2f2f2;

  }
  .banner-con span{
      display: block;
      width: 6.8rem;
      height: 2.6rem;
      margin: 0 auto;
  }
  .sequence{
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      background-color: #f2f2f2;
  }
  .commodity{
      width: 3.3rem;
      height: 4.4rem;
      background-color: #fff;
      border: solid 0.01rem #ccc;
      text-align: center;
  }
  .commImg{
      width: 100%;
      height: 2.65rem;
      border-bottom: 1px solid #ccc;
  }
  .commSp1{
      width: 100%;
      font-size: 0.24rem;
      color: #4d4d4d;
  }
  .commSp2{
      width: 100%;
      font-size: 0.24rem;
      color: #e53e42;
  }
  .commSp3{
      width: 2.2rem;
      height: 0.3rem;
      line-height: 0.3rem;
      text-align: center;
      background-color: #e53e42;
      font-size: 0.18rem;
      margin: 0 auto;
      color: #fff;
      border-radius: 0.2rem;
  }
  .fot{
      width: 100%;
      height: 1.5rem;
      background-color: #f2f2f2;
  }
</style>
